<template>
  <div class="member">
    <el-form :inline="true" :model="searchParams" label-position="left">
      <el-form-item label="用户名">
        <el-input v-model="searchParams.username" @keyup.native.enter="getList()" style="width: 160px;" placeholder="请输入用户名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleAdd">添加用户</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
			:title="editData.id?'编辑':'添加'"
			:visible.sync="dialogVisible"
			class="modifyDialog"
      width="500px">
			<el-form v-loading="isLoadEditData" ref="ruleForm" :model="editData" label-width="100px" class="demo-ruleForm">
        <el-form-item v-if="editData.id" label="id" prop="id">
					<el-input v-model="editData.id"></el-input>
				</el-form-item>
        <el-form-item label="角色权限id" prop="auth_id">
					<!-- <el-input v-model="editData.auth_id"></el-input> -->
          <el-checkbox-group v-model="editData.auth_id" >
            <el-checkbox v-for="item in roles" :label="`${item.id}`" :key="item.id">{{item.title}}</el-checkbox>
          </el-checkbox-group>
				</el-form-item>
				<el-form-item label="用户名" prop="username">
					<el-input v-model="editData.username"></el-input>
				</el-form-item>				
				<el-form-item label="密码" prop="password">
					<el-input v-model="editData.password"></el-input>
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input type="textarea" v-model="editData.remark"></el-input>
				</el-form-item>
        <el-form-item label="头像" prop="head_img">
          <!-- :action="this.$store.state.RealmName + '/backend/pub/up-file'" -->
					<el-upload
            class="avatar-uploader"  
            action=""          
            :headers="{ token: this.$store.state.user.token }"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1">
            <img v-if="image_url1" :src="image_url1" class="avatar">
            <i class="goods_icon el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogLogoVisible">
            <img width="100%" :src="editData.head_img" alt="">
          </el-dialog>
				</el-form-item>
        <el-form-item label="qq" prop="qq">
					<el-input v-model="editData.qq"></el-input>
				</el-form-item>
        <el-form-item label="邮箱" prop="mail">
					<el-input v-model="editData.mail"></el-input>
				</el-form-item>
        <el-form-item label="电话" prop="phone">
					<el-input v-model="editData.phone"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
				<el-button type="primary" @click="editSave">确 定</el-button>
			</span>
		</el-dialog>
    <!-- 密码修改 -->
    <el-dialog
      title="修改密码"
      :visible.sync="passDialogVisible"
      width="500px">
      <el-form ref="ruleForm" :model="modifyData" label-width="100px" class="demo-ruleForm">
        <el-form-item label="id" prop="id">
          <el-input v-model="modifyData.id" readonly></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="modifyData.password"></el-input>
        </el-form-item>        
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="modifySave">确 定</el-button>
      </span>
    </el-dialog>
    <el-table 
      :data="memberList" 
      v-loading = "loading"
      style="margin-top: 12px"
      border
    >
      <el-table-column 
        prop="id"
        label="id"
        min-width="60px"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        align="center"
      >        
      </el-table-column>
      <el-table-column
        prop="head_img"
        label="头像"
        align="center"
        width="100px"
      > 
        <template slot-scope="scope">
            <img :src="scope.row.head_img" width="40" height="40" />
        </template>         
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        align="center"
        min-width="100px"
      >               
      </el-table-column>
      <el-table-column
        prop="status"
        label="用户状态"
        align="center"
        min-width="120px"
      >     
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#5FB878"
            inactive-color="#ccc"
            :active-value= "1"
            :inactive-value="0"
            :active-text="scope.row.status == 1?'启用':'　禁用'"
            :width="45"
            @change="changeStatus($event,scope.row.id)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="create_at"
        label="创建时间"
        min-width="135px"
        align="center"
      >        
      </el-table-column>
      <!-- <el-table-column
        prop="create_by"
        label="创建人"
        align="center"
      >        
      </el-table-column>       -->
      <el-table-column prop="" label="操作" align="center" min-width="220px">
				<template slot-scope="scope">
          <el-button
            v-if="scope.row.id != 1"
            size="mini"
						type="success"
            @click="handleEdit(scope.$index, scope.row)"
          >
            编辑
          </el-button>
					<el-button
						size="mini"
						type="danger"
            @click="handleDelete(scope.row)"
						>删除</el-button>
          <el-button
						size="mini"
						type="success"
            @click="handleModifyPass(scope.row)"
						>修改密码</el-button>
				</template>
			</el-table-column>
    </el-table>
    <el-pagination
        style="margin-top: 12px;"
        @size-change="pageSizeChange"
        :current-page="page_info.page"
        :page-size="page_info.limit"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="prev, pager, next, jumper, sizes"
        :page-count="page_info.total_page"
      >
      </el-pagination>
  </div>
</template>
<script>
import store from "@/vuex/store"
import { mapGetters } from 'vuex'
export default {
  name: 'member',
  computed: {
    ...mapGetters(['RealmName'])
  },
  data () {
      return {
        searchParams: {
          username: ''
        },
        memberList: [],
        loading: false,
        page_info: {
          limit: 10,  //每页显示条数
          page: 1,   //当前页
          total_page: null   //总共页数          
        },
        dialogVisible: false,
        isLoadEditData: false,
        editData: {
          id: null,
          auth_id: '',
          username: '',
          password: '',
          remark: '',
          head_img: '',
          qq: null,
          mail: null,
          phone: null
        },
        roles: [],
        dialogLogoVisible: false,
        image_url1:'',  //用户头像
        passDialogVisible: false,
        modifyData: {
          id: null,
          password: ''
        }
      }
    
  },
  methods: {
    getList (page=1) {
      this.loading = true;
      this.$http.post('/user/list',{...this.searchParams, page, limit: this.page_info.limit}).then( res => {
        if(res.status === 200){
          // if(res.data.msg === 'token过期'){
          //   this.$store.commit('TOKEN', '');
          //   this.$router.push('/login')
          // }
          this.loading = false;
          this.memberList = res.data.result.data;
          if(res.data.result.page_info.limit){
            this.page_info.limit = +res.data.result.page_info.limit;
          }
          
          this.page_info.page = +res.data.result.page_info.page; 
          this.page_info.total_page = +res.data.result.page_info.total_page;
        }
      })
    },
    /**
     * 改变每页页数
     */
    pageSizeChange (pageSize) {
      this.page_info.limit = Number(pageSize);
			this.getList();
    },

    /**
    *启用或禁用菜单
    */
    changeStatus(status,num){
      this.$http.post('/user/status', {
        id: num,
        status: status
      }).then( res => {
        this.$message({
            message: res.data.result.msg,
            center: true,
            type: 'success',
            offset:400,
            duration:1000
        });
      })
    },

    /**
     * 添加用户
     */
    handleAdd(){
      this.editData.id = 0;
      this.editData.auth_id = [];
      this.editData.username = '';
      this.editData.password = '';
      this.editData.remark = '';
      this.editData.head_img = '';
      this.editData.qq = null;
      this.editData.mail = null;
      this.editData.phone = null;
      this.dialogVisible = true;
    },

    /**
     * 编辑用户
     */
    handleEdit(key, data){
      this.dialogVisible = true
      this.isLoadEditData = true;
      this.editData.id = data.id;
      this.editData.auth_id = JSON.parse(data.auth_id);
      this.editData.username = data.username;
      this.editData.password = data.password;
      this.editData.remark = data.remark;
      this.editData.head_img = this.$store.state.user.RealmName + data.head_img;
      this.editData.qq = data.qq ;
      this.editData.mail = data.mail;
      this.editData.phone = data.phone;
			this.isLoadEditData = false;
    },

    /**
     * 提交编辑和增加数据
     */
    editSave(){
      let actionUrl = this.editData.id ? '/user/edit' : '/user/add';
      console.log(this.editData)
			this.$http.post(actionUrl, {
        id: this.editData.id ? this.editData.id : null ,
        auth_id: JSON.stringify(this.editData.auth_id),
        username: this.editData.username,
        password: this.editData.password,
        remark: this.editData.remark ? this.editData.remark : '',
        head_img: this.image_url1.replace(this.$store.state.user.RealmName, ''),
        qq: this.editData.qq ? this.editData.qq : '',
        mail: this.editData.mail ? this.editData.mail : '',
        phone: this.editData.phone ? this.editData.phone : ''
      }).then(res=>{
        if (res.status === 200) {
          this.getList();
          this.dialogVisible = false;
        }
      });
    },
    /**
     * 删除用户
     */
    handleDelete(row){
      this.$confirm('此操作将删除id='+row.id+'这个用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/user/del", {
          id: row.id
        }).then( res => {
          this.getList();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '已取消删除'
        });          
      });
    },

    /**
     * 修改头像
     */
    handleAvatarSuccess1 (res) {
      if (res.status === 1) {
        this.$message.success( '头像上传成功!');
        // this.image_url1 = this.$store.state.user.RealmName+'/' + res.data.list.file;
      }
    },

    /**
     * 修改密码
     */
    handleModifyPass(row){
      this.passDialogVisible = true;
      this.modifyData.id = row.id;
    },
    modifySave(){
      this.$http.post('/user/edit_password',this.modifyData).then(res => {
        if(res.status === 200){
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.passDialogVisible = false;
        }
      })
    }
  },

  /**
   * 获取角色列表
   */
  created(){
    this.$http.post('/auth/list').then(res => {
      if(res.status === 200){
        this.roles = res.data.result.data;
        console.log(this.roles)
      }
    })
  },
  mounted(){
    this.getList()
  }

}
</script>
<style lang="less" scoped>
  .member {
    .avatar {
      width: 40px;
      height: 40px;
    }
  }
</style>